<template>
	<basic-title :class="prefixCls" v-if="getTitle" :helpMessage="helpMessage">
		<span class="title">{{ getTitle }}</span>
	</basic-title>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import BasicTitle from '#/Basic/src/BasicTitle.vue';
import { useDesign } from '@/hooks/web/useDesign';
import { isFunction } from '@/utils/is';

export default defineComponent({
	name: 'BasicTableTitle',
	components: { BasicTitle },
	props: {
		title: {
			type: [String, Function] as PropType<string | ((data?: Recordable) => string)>,
		},
		helpMessage: {
			type: [String, Array] as PropType<string | string[]>,
			default: '',
		},
	},
	setup(props) {
		const { prefixCls } = useDesign('basic-table-title');

		const getTitle = computed(() => {
			const { title } = props;
			if (isFunction(title)) {
				return title();
			}
			return title;
		});

		return {
			prefixCls,
			getTitle,
		};
	},
});
</script>

<style lang="less">
@prefix-cls: ~'@{namespace}-basic-table-title';

.@{prefix-cls} {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		margin-right: 10px;
	}
}
</style>
